import React from "react";
// import logo from './logo.svg';
import { Input, Button } from "antd";
import store from "./store";
import { Provider } from "react-redux";
import Hottest from "./component/Hottest";
// import Hottest2 from './component/Hottest2.tsx';
import ContextTest from "./component/ContextTest";
import Composition from "./component/Composition";
import ReducerTest from "./component/ReducerTest";
import RefTest from "./component/RefTest";
import UesMemoTest from "./component/UesMemoTest";
import UseCallbackTest from "./component/UseCallbackTest";
import HooksSync from "./component/HooksSync";
import CustomizeHooks from "./component/CustomizeHooks";
import MyHooks from "./component/MyHooks";
import ReduxTest from "./component/ReduxTest";
import TestDemos from './component/ReducerToRedux'
import ReactRoutertest from './component/ReactRoutertest'
import "./App.css";
const Search = Input.Search;

class App extends React.Component {
  state = {
    val: "",
    list: [],
  };
  userInput = (e) => {
    this.setState({
      val: e.target.value,
    });
  };
  userChange = () => {
    let { val, list } = this.state;
    list.push(val);
    this.setState({
      list,
    });
  };
  deled(index) {
    console.log(index);
    let list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list,
    });
  }
  render() {
    const { val, list } = this.state;

    return (
      <div className="Fucked">
        <h1>Hell</h1>
        <Input
          type="text"
          value={val}
          style={{ width: 300 }}
          onChange={this.userInput}
        />
        <Button onClick={this.userChange} type="primary">
          添加
        </Button>
        <ul>
          {list.map((el, index) => {
            return (
              <li key={index} onClick={this.deled.bind(this, index)}>
                {el}
              </li>
            );
          })}
        </ul>
        <div>
          <Search
            placeholder="快他娘的来搜我啊，我透"
            style={{ width: "500px" }}
            enterButton={<Button type="danger">我透</Button>}
            onSearch={(value) => console.log(value)}
          />
        </div>
        <Hottest />
        {/* <Hottest2 /> */}
        {/* <ContextTest />
        <Composition />
        <ReducerTest />
        <RefTest />
        <UesMemoTest />
        <UseCallbackTest />
        <HooksSync />
        <CustomizeHooks /> */}
        {/* <MyHooks /> */}
        {/* <Provider store={store}>
          <ReduxTest />
        </Provider>
        <TestDemos /> */}
        <ReactRoutertest />
      </div>
    );
  }
}

export default App;
